<div>
  <!-- 路由跳转按钮 -->
  <div id="title">
      <button data-path="/home">首页</button>
      <button data-path="/center">我的</button>
      <button data-path="/hot">热门</button>
  </div>
  <!-- 路由展示容器 -->
  <div id="view"></div>
</div>
<script>
  const oBtns = document.querySelectorAll("#title>button");
  const oView = document.getElementById("view");
  // 路由表
  const routes = [
      { path: "/home", component: "<h2>欢迎来到首页</h2>" },
      { path: "/center", component: "<h2>我真的不是大冤种</h2>" },
      { path: "/hot", component: "<h2>武汉尚硅谷XXX拿到30k offer</h2>" },
  ];

  //给所有的button绑定点击事件
  for (var i = 0; i < oBtns.length; i++) {
      oBtns[i].onclick = function () {
          // 更新location对象的hash值
          location.hash = this.dataset.path;
      };
  }

  // 绑定hash值改变的监听  => 根据最新的hash值, 找到对应路由组件更新到页面中
  window.onhashchange = function (e) {
      //拿到当前的hash   location.hash #/home => /home
      const hashPath = location.hash.slice(1)
      // 把当前的hash和routes中的path对比, 对比成功后修改视图
      routes.forEach((route) => {
          if (route.path === hashPath) {
              oView.innerHTML = route.component;
          }
      });
  };
</script>